<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验五</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #nav {
        margin: 0 auto;
        background-color: rgb(207, 204, 204);
        text-align: right;
    }
    
    #nav ul {
        padding: 0 30px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
    }
    
    #nav ul li a {
        color: black;
        text-decoration: none;
        font-size: 16px;
    }
    
    #nav ul li:hover {
        border-bottom: 2px blue solid;
    }
    
    #nav ul li a:hover {
        color: blue;
    }
    
    li {
        float: left;
        list-style: none;
        margin: 0 10px;
    }
    
    #nav div {
        margin-bottom: 20px;
        clear: both;
    }
    
    #table-box1 {
        margin: 0 auto;
    }
    
    #table-box1 h1 {
        font-weight: normal;
        color: rgb(107, 194, 206);
        margin-bottom: 20px;
        text-align: center;
        text-shadow: 2px 3px 3px rgb(192, 207, 51);
    }
    
    #table-box1 table {
        margin: 0 auto;
        border-collapse: collapse;
    }
    
    #table-box1 table td {
        color: rgb(50, 88, 72);
        padding: 5px;
        text-align: left;
        border: 2px rgb(24, 206, 78) solid;
    }
    
    #introduction {
        margin: 20px auto;
    }
    
    #introduction h1 {
        color: rgb(107, 194, 206);
        margin-bottom: 20px;
        text-align: center;
        font-weight: normal;
        text-shadow: 2px 3px 3px rgb(192, 207, 51);
    }
    
    #introduction p {
        color: rgb(33, 150, 85);
        font-size: 18px;
        text-indent: 2em;
    }
    
    #introduction img {
        width: 70px;
        float: right;
    }
    
    #table-box2 {
        margin: 20px auto;
    }
    
    #table-box2 h1 {
        margin-bottom: 20px;
        color: rgb(107, 194, 206);
        text-align: center;
        font-weight: normal;
        text-shadow: 2px 3px 3px rgb(192, 207, 51);
    }
    
    #table-box2 table {
        margin: 0 auto;
        border-collapse: collapse;
    }
    
    #table-box2 table td {
        color: rgb(50, 88, 72);
        padding: 5px;
        font-size: 16px;
        text-align: center;
        border: 2px rgb(24, 206, 78) solid;
    }
    
    #table-box2 table td p .span1 {
        float: left;
        color: blue;
    }
    
    #table-box2 table td p .span2 {
        color: #000;
        float: right;
    }
    
    #table-box2 table td p {
        color: rgb(211, 195, 22);
    }
    
    #table-box2 table td .clear {
        color: rgb(177, 20, 20);
        clear: both;
    }
</style>


<body>
    <div id="nav">
        <ul>
            <li><a href="#table-box1">九九乘法口诀表</a></li>
            <li><a href="#introduction"> 物理学家牛顿简介</a></li>
            <li><a href="#table-box2">简约元素周期表</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <script type="text/javascript">
        document.write("<div id='table-box1'>");
        document.write("<table>");
        var str = "九九乘法口诀表";
        document.write("<h1>" + str + "</h1>")
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>");
            for (var j = 1; j <= i; j++) {
                document.write("<td>" + j + "×" + i + "=" + (i * j) + "</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>")
        document.write("</div>");
    </script>
    <div id="introduction">
        <h1>物理学家牛顿简介</h1>
        <img src="../newton.PNG" alt="牛顿">
        <p>
            艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。 他在1687年发表的论文《自然定律》里，对万有引力和三大运动定律进行了描述。这些描述奠定了此后三个世纪里物理世界的科学观点，并成为了现代工程学的基础。他通过论证开普勒行星运动定律与他的引力理论间的一致性，展示了地面物体与天体的运动都遵循着相同的自然定律；为太阳中心说提供了强有力的理论支持，并推动了科学革命。 在力学上，牛顿阐明了动量和角动量守恒的原理，提出牛顿运动定律
            [1] 。在光学上，他发明了反射望远镜，并基于对三棱镜将白光发散成可见光谱的观察，发展出了颜色理论。他还系统地表述了冷却定律，并研究了音速。 在数学上，牛顿与戈特弗里德·威廉·莱布尼茨分享了发展出微积分学的荣誉。他也证明了广义二项式定理，提出了“牛顿法”以趋近函数的零点，并为幂级数的研究做出了贡献。 在经济学上，牛顿提出金本位制度。
        </p>
    </div>
    <div id="table-box2">
        <h1>简约元素周期表</h1>
        <table>
            <tr>
                <td>
                    <p></p>
                    <p></p>
                    <p style="color: coral;">IA</p>
                </td>
                <td style="border: 0;">
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td style="border: 0;">
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td style="border: 0;">
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td style="border: 0;">
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td style="border: 0;">
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td style="border: 0;">
                    <p></p>
                    <p></p>
                    <p></p>
                </td>
                <td>
                    <p></p>
                    <p></p>
                    <p style="color: coral;">VIIIA</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <span class="span1">1</span>
                        <span class="span2">H</span>
                    </p>
                    <p class="clear">氢</p>
                    <p>1.0079(7)</p>
                </td>
                <td style="border: 0;vertical-align: bottom;margin: 0;padding: 0;">
                    <p></p>
                    <p></p>
                    <p style="border-top:2px rgb(24, 206, 78) solid;border-right:2px rgb(24, 206, 78) solid ;color: coral; ">IIA</p>
                </td>
                <td style="border: 0;vertical-align: bottom;margin: 0;padding: 0; ">
                    <p></p>
                    <p></p>
                    <p style="border-top:2px rgb(24, 206, 78) solid;border-right:2px rgb(24, 206, 78) solid ;color: coral;">IIIA</p>
                </td>
                <td style="border: 0;vertical-align: bottom;margin: 0;padding: 0;">
                    <p></p>
                    <p></p>
                    <p style="border-top:2px rgb(24, 206, 78) solid;border-right:2px rgb(24, 206, 78) solid ;color: coral;">IVA</p>
                </td>
                <td style="border: 0;vertical-align: bottom;margin: 0;padding: 0;">
                    <p></p>
                    <p></p>
                    <p style="border-top:2px rgb(24, 206, 78) solid;border-right:2px rgb(24, 206, 78) solid ;color: coral;">VA</p>
                </td>
                <td style="border: 0;vertical-align: bottom;margin: 0;padding: 0;">
                    <p></p>
                    <p></p>
                    <p style="border-top:2px rgb(24, 206, 78) solid;border-right:2px rgb(24, 206, 78) solid ;color: coral;">VIA</p>
                </td>
                <td style="border: 0;vertical-align: bottom;margin: 0;padding: 0;">
                    <p></p>
                    <p></p>
                    <p style="border-top:2px rgb(24, 206, 78) solid;color: coral;">VIIA</p>
                </td>
                <td>
                    <p>
                        <span class="span1">2</span>
                        <span class="span2">He</span>
                    </p>
                    <p class="clear">氦</p>
                    <p>4.0026(2)</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <span class="span1">3</span>
                        <span class="span2">Li</span>
                    </p>
                    <p class="clear">锂</p>
                    <p>6.941(2)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">4</span>
                        <span class="span2">Be</span>
                    </p>
                    <p class="clear">铍</p>
                    <p>9.0122(3)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">5</span>
                        <span class="span2">B</span>
                    </p>
                    <p class="clear">硼</p>
                    <p>10.811(7)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">6</span>
                        <span class="span2">C</span>
                    </p>
                    <p class="clear">碳</p>
                    <p>12.011(8)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">7</span>
                        <span class="span2">N</span>
                    </p>
                    <p class="clear">氮</p>
                    <p>14.007(2)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">8</span>
                        <span class="span2">O</span>
                    </p>
                    <p class="clear">氧</p>
                    <p>15.999(3)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">9</span>
                        <span class="span2">F</span>
                    </p>
                    <p class="clear">氟</p>
                    <p>18.998(3)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">10</span>
                        <span class="span2">Ne</span>
                    </p>
                    <p class="clear">氖</p>
                    <p>20.180(6)</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <span class="span1">11</span>
                        <span class="span2">Na</span>
                    </p>
                    <p class="clear">钠</p>
                    <p>22.990(2)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">12</span>
                        <span class="span2">Mg</span>
                    </p>
                    <p class="clear">镁</p>
                    <p>24.305(6)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">13</span>
                        <span class="span2">Al</span>
                    </p>
                    <p class="clear">铝</p>
                    <p>26.982(2)</p>
                </td>
                <td>
                    <p>
                        <span class="span1"> 14</span>
                        <span class="span2">Si</span>
                    </p>
                    <p class="clear">硅</p>
                    <p>28.086(3)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">15</span>
                        <span class="span2">P</span>
                    </p>
                    <p class="clear">磷</p>
                    <p>30.974(2)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">16</span>
                        <span class="span2">S</span>
                    </p>
                    <p class="clear">硫</p>
                    <p>32.453(2)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">17</span>
                        <span class="span2">Cl</span>
                    </p>
                    <p class="clear">氯</p>
                    <p>35.453(2)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">18</span>
                        <span class="span2">Ar</span>
                    </p>
                    <p class="clear">氩</p>
                    <p>39.948(1)</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        <span class="span1">19</span>
                        <span class="span2">K</span>
                    </p>
                    <p class="clear">钾</p>
                    <p>39.098(4)</p>
                </td>
                <td>
                    <p>
                        <span class="span1">20</span>
                        <span class="span2">Ca</span>
                    </p>
                    <p class="clear">钙</p>
                    <p>40.08(4)</p>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>